<template>
  <div class="message">
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input
            v-model="formInline.communityname"
            placeholder="请输入发布小区"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.title"
            placeholder="请输入公告主题"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.content"
            placeholder="请输入发布内容"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-plus" type="success" @click="onSearch"
            >发布公告</el-button
          >
          <el-button type="primary" @click="onClear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box">
      <el-tabs type="border-card">
        <el-tab-pane label="公告信息">
          <div class="table">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                align="center"
                prop=""
                type="index"
                label="序号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="title"
                label="公告主题"
                width="180"
              >
              </el-table-column>
              <el-table-column align="center" prop="content" label="公告内容">
              </el-table-column>
              <el-table-column
                align="center"
                prop="createtime"
                label="发布时间"
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.createtime.split("T")[0] +
                    " " +
                    scope.row.createtime.split("T")[1].split(".")[0]
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="communityname"
                label="小区名称"
              >
              </el-table-column>
              <el-table-column align="center" prop="" label="操作">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-delete"
                    type="danger"
                    @click="clearRow(scope.row, scope.$index)"
                    >归档</el-button
                  >
                  <el-button
                    icon="el-icon-zoom-in"
                    type="primary"
                    @click="openDialog(scope.row, scope.$index)"
                    >查看公告</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page" style="text-align: right">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNumber"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
          <div class="dialog">
            <el-dialog
              title="公告详情"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose"
            >
              <el-form ref="form" :model="dialogForm" label-width="80px">
                <div class="dialog_top">
                  <el-form-item label="小区名称">
                    <el-input
                      v-model="dialogForm.communityname"
                      disabled
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="发布时间">
                    <el-col :span="11">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="dialogForm.createtime"
                        disabled
                        style="width: 100%"
                      ></el-date-picker>
                    </el-col>
                  </el-form-item>
                </div>
                <div class="dialog_bottom">
                  <el-form-item label="公告主题">
                    <el-input v-model="dialogForm.title" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="公告内容">
                    <el-input
                      type="textarea"
                      v-model="dialogForm.content"
                      disabled
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="公告状态">
                    <el-button disabled plain>阅读量</el-button>
                  </el-form-item>
                </div>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false"
                  >关闭</el-button
                >
              </span>
            </el-dialog>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //对话框表单
      dialogForm: {},
      //对话框控制
      dialogVisible: false,
      //分页
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      //表格
      tableData: null,
      //搜索
      formInline: {
        communityname: "",
        title: "",
        content: "",
      },
    };
  },
  methods: {
    //关闭对话框
    handleClose(done) {
      done();
    },
    //查看公告
    openDialog(row, index) {
      this.dialogVisible = true;
      this.dialogForm = row;
    },
    //归档
    clearRow(row, index) {
      this.$confirm("此操作将永久归档该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("poster/delPoster", {
              params: {
                p_id: row.p_id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then(() => {
              this.getTableData();
              this.$message({
                type: "success",
                message: "删除该信息公告!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除该信息公告",
          });
        });
    },
    //初始化表格
    getTableData() {
      this.$axios
        .get("poster/getPosterData", {
          params: {
            currPage: this.pageNumber - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          console.log(res, "res");
          (this.tableData = res.data.data), (this.total = res.data.total);
        });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getTableData();
    },
    // 搜索
    onSearch() {
      if (
        this.formInline.communityname == "" ||
        this.formInline.title == "" ||
        this.formInline.content == ""
      ) {
        this.$alert("请确保公告发布内容是否完整", "公告内容不全", {
          confirmButtonText: "确定",
        });
      } else {
        this.$axios
          .post("poster/addPoster", {
            communityname: this.formInline.communityname,
            title: this.formInline.title,
            content: this.formInline.content,
            token: sessionStorage.getItem("token"),
          })
          .then(() => {
            // console.log(res)
            this.$message({
              message: "发布成功",
              type: "success",
            });
          });
      }
    },
    //重置
    onClear() {
      this.formInline = {
        communityname: "",
        title: "",
        content: "",
      };
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss" scoped>
.message::v-deep {
  .box {
    .dialog {
      .dialog_top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .el-form-item {
          width: 48%;
          .el-date-editor {
            width: 266px !important;
          }
        }
      }
      .dialog_bottom {
        .el-textarea__inner {
          height: 100px !important;
        }
      }
    }
    .table {
      thead {
        tr {
          th {
            font-size: 18px;
            background-color: #ebebeb;
            color: black;
          }
        }
      }
    }
  }
}
</style>